<template>
  <div class="pb-[95px] relative ">
    <ul class="px-[16px] box-border h-[663px] overflow-scroll overflow-x-hidden">
      <li class="relative cursor-pointer" v-for="(item, index) in menuitems" :key="index">
        <div>
            <span class="code">{{ item.code }}</span>
            <span>{{ item.CH }}</span>
            </div>
      </li>
    </ul>
    <div class="justify-left items-center absolute flex bottom-[44px] b-line">
       <span class="text-999 text-[14px]"> 浏览新品类别: <select name="" id="">
        <option value="1" v-for="item in typeList">
          {{ item.CH }}</option>
       </select></span>
       <span class="ml-[24px] text-999 text-[14px]"> 发布时间: <select name="" id="">
        <option value="1" v-for="item in dateList">{{ item.CH }}</option>
       </select>
      </span>
      <button
        class="ml-[20px] mr-[19px] bg-brown w-[36px] h-[26px] rounded-[2px] flex items-center justify-center">
        <img :src="search.src" class="w-[22px] h-[22px]" />
      </button>
      </div>
      <div class="justify-center items-center absolute flex bottom-[0px]  b-line text-999 text-[14px] pb-[10px]" style="border-width: 0;">关注我们
      <span @click="handleVisibleChange(true)" class="w-[36px] h-[26px] rounded-[2px] border-solid border-[1px] border-999 ml-[10px] flex items-center justify-center cursor-pointer"><img :src="wx.src" alt="" class="w-[16px] h-[16px]"></span>
      </div>
      <QrCode v-model="visible" client:load />
  </div>
  </template>
  <script setup>
import search from "@assets/search.png";
import wx from "@assets/wx.png";
import QrCode from '@components/qrCode.vue'
import { ref } from 'vue'
import ezsip from "@assets/product/EZSIP@_gray.png";


const visible = ref(false)
const handleVisibleChange = (val) => {
    visible.value = val
}


  const menuitems = [
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "18V输入双通道15A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "6V输入单通道3A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "17V输入单通道3A同步直流隆压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "5.5V输入单通道3A同步直流降压模块(PFM)",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "5.5V输入单通道3A同步直流降压模块(FCCM)",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "7V输入单通道3A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "18V输入双通道15A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "15V输入单通道5A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "15V输入单通道8A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "32V输入带I2C的双通道的8A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "18V输入带PMBus双通道的25A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "42V输入带12C的双路同步降压控制器",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "18V输入双通道15A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "18V输入双通道15A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "18V输入双通道15A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "18V输入双通道15A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    },
    {
      CH: "15V输入单通道15A同步直流降压模块",
      code: 'EZS15',
      path: "/pricing",
    },
    {
      CH: "18V输入双通道15A同步直流降压模块",
      code: 'EZ8620',
      path: "/pricing",
    },
    {
        CH: "18V输入双通道15A同步直流降压模块",
        code: 'EZ8620',
        path: "/pricing",
    }
    
  ]
  const typeList = [
{CH: '负载点电源'},
{CH: '电源控制器'},
{CH: '智能功率级芯片'},
{CH: 'ezSIP® 微电源模块'},
{CH: '智能功率电源块'},
  ]
  const dateList= [
 { CH:'三天以内'},
  {CH:'一周以内'},
  {CH:'一月以内'},
  {CH:'半年以内'},
  {CH:'一年以内'},
 { CH:'全部'}
  ]
  </script>
  <style lang="scss" scoped>
  .b-line{
    border-bottom: 1px solid #D8D5D5;
    width: calc(100% - 32px);
    left: 16px;
    padding-bottom: 10px;
  }
  select{
    border-radius: 2px;
    height: 26px;
    line-height: 26px;
    background: #FFFFFF;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
padding-right: 6px;
margin-left: 4px;
font-size: 14px;
  }
  select::placeholder{
font-size: 14px;
    
  }
  li {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #D8D8D8;
    box-sizing: border-box;
    color: #3D3D3D;
    font-size: 14px;
    .code{
            color: #712C2F;
            margin-right: 14px;
            width: 66px;
            display: inline-block;
          }
  
    &:hover {
        border-bottom-color: #712C2F;
        .code{
            color: #712C2F;
            border-bottom: 1px solid #712C2F;
        }
      .default {
        display: none;
      }
  
      .hover {
        display: block;
      }
    }
  
    .hover {
      display: none;
    }
  
    .default {
      display: block;
    }
  }
  </style>